<template>
  <div id="app">
    <h1>Socket 服务测试</h1>
    <p>当前在线人数：{{ socketService.state.onlineCount }}</p>
    <p>累计登录人数：{{ socketService.state.totalCount }}</p>
  </div>
</template>

<script>
import socketService from "@/utils/socketService";
export default {
  mounted() {
    // 连接到 WebSocket 服务
    socketService.connect();
    // 可以在此处触发登录事件
    socketService.login();
  },
  beforeUnmount() {
    // 组件销毁时断开连接
    socketService.disconnect();
  },
  // 将 socketService 导入到模板中
  computed: {
    socketService() {
      return socketService;
    },
  },
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}
</style>
